<template>

    <view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="count">
        <u-toast ref="uToast" />
        <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30">
            <view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{title}}</view>
            <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @click="articleDetail(id)"></u-icon>
        </view>
        <view class="coreshop-divider">
            <view class="complete"></view>
        </view>
        <view class="coreshop-margin-bottom-10 coreshop-bg-main coreshop-text-black coreshop-index-article">
            <view class='coreshop-cell-item'>
                <view class="coreshop-cell-item-bd">
                    <view class="article-des u-line-5">
                        {{ brief }}
                    </view>
                </view>
                <view class="cell-title-img">
                    <image :src="coverImage" mode="aspectFill" class="coverImage"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "coreshopArticle",
        props: {
            coreshopData: {
                // type: Array,
                required: true,
            }
        },
        data() {
            return {
                title: "",
                brief: "",
                coverImage: "",
                id: 0
            }
        },
        created() {
            if (this.coreshopData.parameters.list.length > 0) {
                this.title = this.coreshopData.parameters.list[0].title;
                this.brief = this.coreshopData.parameters.list[0].brief;
                this.coverImage = this.coreshopData.parameters.list[0].coverImage;
                this.id = this.coreshopData.parameters.list[0].id;
            }
        },
        computed: {
            count() {
                return (this.coreshopData.parameters.list.length > 0)
            }
        },
        methods: {
            // 查看文章详情
            articleDetail(articleId) {
                this.$u.route('/pages/article/details/details?id=' + articleId + '&idType=1')
            }
        }
    }
</script>

<style scoped lang="scss">
    .coreshop-index-article { background: #FFFFFF !important; color: #333333 !important; overflow: hidden;
        .coreshop-cell-item { padding: 5px 0px 5px 0; float: left; width: 100%; border-bottom: 1px solid #f3f3f3;
            .coreshop-cell-item-bd { float: left; width: calc(100% - 100px);
                .article-des { font-size: 14px; color: #999; overflow: hidden; float: left; line-height: 20px; }
            }
            .cell-title-img { width: 80px; height: 80px; float: right;
                .coverImage { width: 80px; height: 80px; border-radius: 2px; }
            }
        }
    }
</style>
